<!--
 * @Description: 一码人脉列表
 * @Author: Kerwin
 * @Date: 2024-10-28 17:47:08
 * @LastEditTime: 2024-10-30 14:53:36
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view class="container">
        <!-- <map style="width: 100%; height: 100vh" :latitude="mapOption.latitude" :longitude="mapOption.longitude"
            :markers="mapOption.covers" :scale="mapOption.scale" :show-location="mapOption.showLocation"
            @callouttap="toDetail">
        </map>
        <view class="location-btn" @click="getLocation">
            <u-image width="50rpx" height="50rpx"
                src="https://image.blacksilverscore.com/uploads/7da3c965-4a2a-493b-8b42-fc1df4a9dfbc.png"></u-image>
        </view> -->
        <view class="list" v-for="item in circleList" :key="item.id">
            <view class="item" @click="toDetail(item)">
                <view class="avatar">
                    <u-image width="100%" height="100%" border-radius="8" :loading-icon="avatar_def"
                        :error-icon="avatar_def" :src="item?.avatar ? getImgFullPath(item?.avatar) : avatar_def"
                        :lazy-load="false" :fade="false" mode=""></u-image>
                </view>
                <view class="content">
                    <view class="left">
                        <view class="info">
                            <view class="name">{{ item.name }}  <text class="count">(200人)</text></view>
                            <view class="remark">{{ item.remark }}</view>
                        </view>
                        <view class="time">创建日期：{{ dateFormat(new Date(item.createTime * 1000), 'yyyy-MM-dd') }}</view>
                        <view class="addr">
                            地址： {{ getAddr(item) }}
                            <hy-svg name="icon-daohang" width="24"></hy-svg>
                        </view>
                    </view>
                    <view class="right">
                        <u-button class="btn" ripple >加入</u-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { onLoad, onShow, onReady, onReachBottom } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, powerBankApi, socialApi } from '@/api'
import { dateFormat, getImgFullPath } from '@/utils/index'
import { useUserStore, useChatStore } from '@/store'
import { getQueryObject, parseParams, route, } from '@/utils/common'
import avatar_def from '../../static/img/avatar_default.svg'


const userStore = useUserStore()
const chatStore = useChatStore()
const { userInfo } = storeToRefs(userStore)

interface CircleItem {
    id: number
    avatar: string
    name: string
    latitude?: number
    longitude?: number
    remark: string
    type: number
    createTime: number
    chatGroupId: string
    provinceName: string
    cityName: string
}
const circleList = ref<CircleItem[]>([])
const pagination = reactive({
    pageIndex: 1,
    pageSize: 30,
    finished: false
})
const getData = async () => {
    let { pageIndex, pageSize, finished } = pagination
    if (finished) return
    uni.showLoading({
        title: '加载中...',
        mask: true
    })
    const { data, current, pages } = await socialApi.circleList({
        type: 1,
        pageIndex,
        pageSize
    }).finally(() => {
        uni.hideLoading()
    })
    if (data && data.records) {
        circleList.value.push(...data.records)
        circleList.value.push(...data.records)
        circleList.value.push(...data.records)
        circleList.value.push(...data.records)
    }
    if (current < pages) {
        pageIndex++
    } else {
        finished = true
    }
    return data
}

function getAddr(item: CircleItem) {
    let addr: string = '';
    if (item.provinceName) {
        addr += item.provinceName
    }
    if (item.cityName) {
        addr += item.cityName
    }
    return addr
}


const mapOption = reactive({
    id: 0, // 使用 marker点击事件 需要填写id
    title: 'map',
    latitude: 39.909,
    longitude: 116.39742,
    scale: 9,
    showLocation: true,
    covers: []
})
function getLocation() {
    uni.getLocation({
        type: 'gcj02',
        success(res) {
            if (res.errMsg === 'getLocation:ok') {
                const { latitude, longitude } = res
                mapOption.latitude = latitude
                mapOption.longitude = longitude
                uni.setStorageSync('currentLocation', { latitude, longitude })
                getMarkers()
            }
        },
        fail(res) {
            if (res.errMsg === 'getLocation:fail auth deny') {
                uni.showModal({
                    content: '检测到您没打开获取位置信息功能权限，是否去设置打开？',
                    confirmText: '确认',
                    cancelText: '取消',
                    success: (res) => {
                        if (res.confirm) {
                            uni.openSetting({
                                success: () => {
                                    console.log('确定')
                                }
                            })
                        } else {
                            console.log('取消')
                        }
                    }
                })
            }
        }
    })
}
const cover = {
    latitude: '',
    longitude: '',
    iconPath:
        'https://image.blacksilverscore.com/uploads/b6562e03-f39d-4648-b7ad-7ff8164ca495.png',
    callout: {
        content: '',
        color: '#ffffff',
        fontSize: 14,
        borderRadius: 5,
        borderWidth: '10',
        bgColor: '#56D369',
        display: 'ALWAYS'
    }
}
async function getMarkers() {
    const data = await getData()
    // const covers = data.map((item) => {
    //     const temp = JSON.parse(JSON.stringify(cover))
    //     temp.latitude = item.latitude
    //     temp.longitude = item.longitude
    //     temp.callout.content = item.name
    //     return temp
    // })
    // mapOption.covers = covers
}

function toDetail(data: { [x: string]: any; id?: any }) {
    route({
        url: '/packageD/pages/sites/users',
        params: {
            cid: data.id
        }
    })
}

onLoad((option) => {
    const currentLocation = uni.getStorageSync('currentLocation')
    if (currentLocation) {
        mapOption.latitude = currentLocation.latitude
        mapOption.longitude = currentLocation.longitude
        getMarkers()
    } else {
        getLocation()
    }
})
onReachBottom(() => {
    getData()
})
</script>


<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: rgb(4 3 33 / 91%);
    padding: 30rpx 0;
    .list {
        .item {
            display: flex;
            position: relative;
            min-height: 210rpx;
            border-radius: 8rpx;
            margin-bottom: 30rpx;
            // box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

            .avatar {
                position: absolute;
                left: 30rpx;
                top: 0;
                width: calc(100% - 60rpx);
                height: calc(100%);
                border-radius: 8rpx;
            }

            .content {
                position: absolute;
                width: calc(100% - 60rpx);
                min-height: calc(100%);
                left: 30rpx;
                top: 0;
                color: #ffffffe1;
                backdrop-filter: blur(10rpx);
                border-radius: 8rpx;
                box-shadow: 0 5px 30px 0 #404040, inset -10px -10px 20px 0px #dddddd9b;
                border: 0.1px solid #fff;
                padding: 20rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .info {
                    font-size: 32rpx;
                    margin-bottom: 10rpx;
                    .name {
                        .count {
                            font-size: 26rpx;
                        }
                    }
                }

                .addr {
                    display: flex;
                    align-items: center;
                    gap: 18rpx
                }
            }
        }
    }

    .location-btn {
        position: fixed;
        bottom: 400rpx;
        z-index: 3;
        right: 40rpx;
        background-color: #fff;
        border-radius: 50%;
        padding: 8rpx;

        &.mine {
            bottom: 500rpx;
        }
    }

    .btn {
        width: 100%;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 8rpx;
        color: #fff;
        border: none;
        background-color: rgba(255,255,255,0.2);
        // box-shadow: 4rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.2);
        letter-spacing: 10rpx;
        // margin-top: 6rpx;
    }
}
</style>
